import React, {Component} from 'react'
import {Table, Input, List,Card, Select, Button, Divider, Radio, Modal, Layout,
    InputNumber, DatePicker, Skeleton, Avatar
} from 'antd';
import ResultTable8 from "../resultTable/ResultTable8";
import '../../component/pro_caseSearch/Pro_Case_search.css';
import ReactToPrint from 'react-to-print';
import axios from 'axios';
import {
    SearchWapper,
    SearchName,
    SearchBox,
    ListInfo,
} from './DataSearStyle';


const {RangePicker} = DatePicker;
const {Header} = Layout;

/***********************************课题8不在这里在component的case_search.js************************************************************/
//企业名称选择框初始化
const Option = Select.Option;


const provinceData = [
    "  ",
    "北京市",//0
    "上海市",//1
    "天津市",//2
    "重庆市",//3
    "河南省",//4
    "安徽省",//5
    "福建省",//6
    "甘肃省",//7
    "贵州省",//8
    "海南省",//9
    "河北省",//10
    "黑龙江省",//11
    "湖北省",//12
    "湖南省",//13
    "吉林省",//14
    "江苏省",//15
    "江西省",//16
    "辽宁省",//17
    "青海省",//18
    "山东省",//19
    "山西省",//20
    "陕西省",//21
    "四川省",//22
    "云南省",//23
    "浙江省",//24
    "台湾省",//25
    "广东省",//26
    "广西壮族自治区",//27
    "内蒙古自治区",//28
    "宁夏回族自治区",//29
    "西藏藏族自治区",//30
    "新疆维吾尔自治区",//31
    "特别行政区"//32
];


//设计产能变量
const RadioGroup = Radio.Group;

/**
 * 课题组1 本底数据
 * @autuhor zm
 */
class ResearchGroup8 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            provinceValue: '',//省市
            qiYeMCValue: '',//企业名字
            sheJiCNValue_min: '',//设计产能
            sheJiCNValue_max: '',//设计产能
            shuLiaoRHValue: '',//熟料热耗
            paiFangZKValue: '',//排放状况
            keyWord: '',//关键字
            // dataList: '',

            exeData: [],
            visible: false,
            baseData: [],//基本信息表
            resultData: []//本底数据表
        }
    }

    //企业名称方法
    onChangeQiYeMC = (e) => {
        this.setState({
            qiYeMCValue: e.target.value
        });
    }
    handleProvinceChange = value => {
        this.setState({
            province: value,

        });
    };


    onChangeDatePicker(date, dateString) {
        this.setState({
            startDate: dateString[0],
            endDate: dateString[1],
        });
    }

    //设计产能方法
    onChangesheJiCN_min = (e) => {
        this.setState({
            sheJiCNValue_min: e.target.value,
        });
    };
    onChangesheJiCN_max = (e) => {
        this.setState({
            sheJiCNValue_max: e.target.value,
        });
    };
    onChangeKeyWord = (e) => {
        this.setState({
            keyword: e.target.value,
        });
    };

    //可比熟料热耗方法
    onChangeShuLiaoRH = (e) => {
        this.setState({
            shuLiaoRHValue: e.target.value,
        });
    }

    //排放状况方法
    onChangePaiFangZK = (e) => {
        this.setState({
            paiFangZKValue: e.target.value,
        });
    }

    //查询按钮方法
    handleSearchInfo = () => {
        //获取企业名称
        const qiYeMCValue = this.state.qiYeMCValue;
        //获取企业区域
        const provinceValue = this.state.provinceValue;
        //获取设计产能
        const sheJiCNValue = this.state.sheJiCNValue;
        //获取可比熟料热耗
        const shuLiaoRHValue = this.state.shuLiaoRHValue;
        //获取排放状况
        const paiFangZKValue = this.state.paiFangZKValue;
        let formData = new FormData();
        formData.append('comp_name', qiYeMCValue);
        formData.append('comp_address', provinceValue);
        formData.append('design_power', sheJiCNValue);


    };

    // 初始化
    componentDidMount = () => {
        axios.get('/api/group1.json')
            .then((res) => {
                console.log("测试res")
                console.log(res.data.data)
                console.log("测试res")
                const tempData = res.data.data.researchGroup1BaseModels;
                this.setState({
                    exeData: tempData,
                }, () => {
                    console.log("测试group")
                    console.log(this.state.exeData)
                    console.log("测试group")
                })
            })
    }
    //查看按钮
    showModal = (i) => {
        const item = this.state.exeData[i];
        this.setState({
            visible: true,
            resultData: item,
        })
    }
    //控制modal的显示与隐藏
    handleOk = () => {
        this.setState({
            visible: false,
        })
    }
    handleCancel = () => {
        this.setState({
            visible: false,
        })
    }

    render() {
        // 企业区域
        // 表头
        const column = [
            {
                title1: '企业名称',
                title2: '省',
                title3: '设计产能',
                title4: '操作'
            }
        ];
        const {data} = this.state;

        return (
            <div
                className='pro_case_search'
                style={{padding: 24, background: '#fff', height: '100%'}}
            >
                <Header style={{background: '#fff', padding: 0}}>
                    <div style={{float: 'left'}}>
                        <a href='/'>
                            <img src={require("../../img/logo-whut.png")}/>
                        </a>
                    </div>
                </Header>
                <Divider orientation="left">查询条件</Divider>
                <SearchWapper>
                    <SearchName>
                        企业名称：
                    </SearchName>
                    <SearchBox>
                        <Input
                            className="SearchBox searchbox"
                            value={this.state.qiYeMCValue}
                            onChange={this.onChangeQiYeMC}
                        />
                    </SearchBox>
                </SearchWapper>
                <SearchWapper>
                    <SearchName>
                        省：
                    </SearchName>
                    <Select
                        defaultValue={provinceData[0]}
                        className='SearchWapper searchbox'
                        onChange={this.handleProvinceChange}
                    >
                        {provinceData.map(province => (
                            <Option key={province}>{province}</Option>
                        ))}
                    </Select>
                </SearchWapper>
                <SearchWapper>
                    <SearchName>
                        关键字:
                    </SearchName>
                    <SearchBox>
                        <Input
                            type='primary'
                            placeholder={"可以输入标题或者是关键字"}
                            className='SearchWapper searchbox'
                            value={this.state.keyword} onChange={this.onChangeKeyWord}/>
                    </SearchBox>
                </SearchWapper>
                <SearchWapper>
                    <SearchName>
                        设计产能:
                    </SearchName>
                    <SearchBox>
                        <InputNumber
                            className='SearchBox searchSJCN1'
                            onChange={this.onChangesheJiCN_min}
                            min={0}
                        />~~
                        <InputNumber
                            className='SearchBox searchSJCN2'
                            onChange={this.onChangesheJiCN_max}
                            min={0}
                        />
                        吨
                    </SearchBox>
                </SearchWapper>
                <SearchWapper>
                    <SearchName>
                        筛选时间区间:
                    </SearchName>
                    <RangePicker
                        className="SearchBox searchbox"
                        onChange={(date, dateString) => {
                            this.onChangeDatePicker(date, dateString)
                        }}/>
                    <br/>
                </SearchWapper>


                <Divider orientation="right">
                    <Button
                        type="primary"
                        onClick={this.handleSearchInfo}
                    >查询
                    </Button>
                </Divider>
                <List
                    dataSource={column}
                    renderItem={item => (
                        <List.Item>
                            <ListInfo>{item.title1}</ListInfo>
                            <ListInfo>{item.title2}</ListInfo>
                            <ListInfo>{item.title3}</ListInfo>
                            <ListInfo>{item.title4}</ListInfo>
                        </List.Item>
                    )}
                />
                <List
                    pagination={{
                        onChange: page => {
                            console.log(page);
                        },
                        pageSize: 3,
                    }}
                    dataSource={this.state.exeData}
                    renderItem={(item,index) => (
                        <List.Item>
                            <ListInfo>{item.researchGroupBaseInf.enterpriseName}</ListInfo>
                            <ListInfo>{item.researchGroupBaseInf.province}</ListInfo>
                            <ListInfo>{item.researchGroupBaseInf.designProductionCapacity}</ListInfo>
                            <ListInfo>
                                <Button type="primary" onClick = {() => this.showModal(index)}>
                                    查看
                                </Button>
                            </ListInfo>


                        </List.Item>
                    )}
                />
                <label><b>当前查询总数:{this.state.exeData.length}</b></label>
                查看结果列表
                <Modal
                    title="问卷信息"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width='100%'
                    height='100%'
                >
                    <ResultTable8 group1Data={this.state.resultData} />
                    <ReactToPrint
                        trigger={() => <a href="#"><Button type='primary' style={{marginTop: 10}}>打印</Button></a>}
                        content={() => this.refs}
                    />

                </Modal>
            </div>

        );
    }
}

export default ResearchGroup8;